<!-- home -->
<template>
  <page-view :full="true">
    <top-bar title="账户与安全"
             :white="true">
    </top-bar>
    <page-content>
      <div class="se-con">
        <img src="../../assets/image/mine/m_hj.png"
             alt=""
             class="se-hj">
        <p class="se-yh"><span class="se-count">{{!user.idcard ? 1 : 0}}</span>个可优化项</p>
        <p class="se-bh">时刻保护您的账户安全</p>
      </div>
      <div class="se-box">
        <div class="se-item">
          <div class="se-sf">身份认证<small v-if="user.idcard">（{{user.fullname}}）</small></div>
          
          <div v-if="user.idcard" class="se-rz">
            <van-icon name="certificate" /> 认证成功
          </div>
          <div v-if="!user.idcard" @click="checkInfor" class="se-rz">
            <van-icon name="debit-pay" /> 立即认证
          </div>
        </div>
        <div class="se-item"
             id="sr-i">
          <div class="se-sf">重置登录密码</div>
          <div class="se-rzs"
               @click="goReset">
            重置
          </div>
        </div>
      </div>
    </page-content>
  </page-view>
</template>

<script>
import TopBar from '@/components/TopBar';
import PageView from '@/components/PageView';
import PageContent from '@/components/PageContent';
export default {
  data () {
    return {
      user: {}
    }
  },
  components: {
    TopBar,
    PageView,
    PageContent
  },
  mounted () { },
  created () {
    this.user = this.$store.state.user;
  },
  methods: {
    //认证信息
    checkInfor () {
      this.$router.push({ path: '/checkInfor' })
    },

    goReset () {
      this.$router.push({ path: '/reset' })
    }
  }
}
</script>
<style lang="scss" scoped>
.btn-box {
  text-align: center;
}
.se-con {
  height: 281px;
  background: #585df9;
  position: relative;
  overflow: hidden;
  z-index: 1;
  .se-hj {
    width: 304px;
    height: 174px;
    position: absolute;
    right: 0;
    top: 76px;
  }
  .se-yh {
    padding-left: 37px;
    box-sizing: border-box;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    margin-top: 76px;
    span {
      font-size: 40px;
    }
  }
  .se-bh {
    padding-left: 37px;
    box-sizing: border-box;
    font-size: 15px;
    color: #ffffff;
  }
}
.se-box {
  height: calc(100vh - 261px);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background: #fff;
  margin-top: -20px;
  position: relative;
  padding: 0 20px;
  z-index: 10;
  overflow: hidden;
  .se-item {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    height: 55px;
    line-height: 55px;
    background: #fff;
    .se-sf {
      font-size: 15px;
      font-weight: 600;
      color: #3d3e54;
    }
    .se-rz {
      display: flex;
      align-items: center;
      font-size: 13px;
      font-weight: 400;
      color: #585df9;
      i{
        font-size: 15px;
        margin-right: 5px;
      }
    }
    .se-rzs {
      font-size: 15px;
      font-weight: 400;
      color: #7a7886;
    }
  }
}
#sr-i {
  margin-top: 0;
}
.cf-btn {
  width: 335px;
  height: 57px;
  line-height: 57px;
  background: #585df9;
  border-radius: 29px;
  text-align: center;
  font-size: 17px;
  font-weight: 500;
  color: #ffffff;
  position: fixed;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 95px;
  z-index: 19;
}
</style>
